<template>
  <div class="v-control v-data-picker-container" :style="{marginRight: props.isMarginRight? '24px': '0'}">
    <label v-text="label" v-if="label"></label>
    <el-date-picker
        v-if="props.isPicker"
        class="piker"
        v-model="dataPickerValue"
        :type="props.type"
        :value-format="props.valueFormat"
        :format="props.format"
        :start-placeholder="props.startPlaceholder"
        :end-placeholder="props.endPlaceholder"
        :clearable="props.clearable"
        @change="dataPickerChange"
        :style="{width: props.width + 'px'}"
    ></el-date-picker>
    <el-date-picker
        v-else
        class="noPiker"
        v-model="dataValue"
        :type="props.type"
        :value-format="props.valueFormat"
        :format="props.format"
        :placeholder="props.placeholder"
        :clearable="props.clearable"
        @change="dataChange"
        :style="{width: props.width + 'px'}"
    ></el-date-picker>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, watch, ref} from 'vue'

const props = defineProps({
  label: {
    type: String,
    default: ''
  },
  // 禁用
  disabled: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  },
  placeholder: {
    type: String,
    default: '选择年份'
  },
  type: {
    type: String,
    default: 'daterange'
  },
  width: {
    type: Number,
    default: 240
  },
  valueFormat: {
    type: String,
    default: "YYYY-MM-DD"
  },
  format: {
    type: String,
    default: "YYYY-MM-DD"
  },
  startPlaceholder: {
    type: String,
    default: '请选择起始时间'
  },
  endPlaceholder: {
    type: String,
    default: '请选择结束时间'
  },
  startTime: {
    type: String,
    default: ''
  },
  endTime: {
    type: String,
    default: ''
  },
  isPicker: {
    type: Boolean,
    default: true
  },
  dataValue: {
    type: String,
    default: ''
  },
  isMarginRight: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:startTime', 'update:endTime', 'update:dataValue'])

const dataPickerValue = ref<string[]>([props.startTime, props.endTime])
const dataValue = ref<string>(props.dataValue)

watch(
    () => props.startTime,
    () => {
      dataPickerValue.value[0] = props.startTime
    },
)

watch(
    () => props.endTime,
    () => {
      dataPickerValue.value[1] = props.endTime
    },
)

watch(
    () => props.dataValue,
    () => {
      dataValue.value = props.dataValue
    },
)

watch(
    () => dataPickerValue.value,
    () => {
      console.log(dataPickerValue.value);
      emits('update:startTime', dataPickerValue.value[0])
      emits('update:endTime', dataPickerValue.value[1])
    },
    {deep: true}
)

let defaultPlaceholder = ref(props.placeholder)

onMounted(() => {
  if (props.placeholder === '' && props.label) {
    defaultPlaceholder.value = `请输入${props.label}`
  }
})

const dataChange = (data) => {
  console.log(data);
  emits('update:dataValue', data)
}

const dataPickerChange = (data) => {
  console.log(data);
  emits('update:startTime', data[0])
  emits('update:endTime', data[1])
}
</script>
<style scoped lang="scss">

.v-data-picker-container {
  label {
    margin-right: 10px;
    font-size: $--el-font-size-base;
    vertical-align: middle;
  }

  :deep(.el-date-editor) {
    vertical-align: middle;
  }
}
</style>
